class WH_dropdown extends HTMLElement {
    #template = document.createElement('template');
    #content;
    #shadowRoot;

    constructor() {
        super();
        this.#init();

        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
        this.#content = this.#template.content.cloneNode(true);
        this.#shadowRoot.appendChild(this.#content);

        this.$container = this.#shadowRoot.querySelector('.container');
        this.$button = this.#shadowRoot.querySelector('button');
        this.$dropdownList = this.#shadowRoot.querySelector('.dropdown-list');

        this.$container.addEventListener("mouseenter", this.#dropdownListShow.bind(this));
        this.$container.addEventListener("mouseleave", this.#dropdownListShow.bind(this));
    }

    #init() {
        this.#template.innerHTML = `
            <style>
                ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            /* 滚动条轨道的样式 */
            ::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background-color: #ededed;
                border-radius: 6px;
            }

            /* 滚动条的样式 */
            ::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background-color: skyblue;
                background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%,
                        transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%,
                        rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent 75%, transparent);
            }

            /* 滚动条在鼠标悬停时的样式 */
            ::-webkit-scrollbar-thumb:hover {
                background: #555555;
            }

            /* 滚动条轨道在鼠标悬停时的样式 */
            ::-webkit-scrollbar-track:hover {
                background: #dddddd;
            }

            /* 滚动条按钮（上下箭头）的样式 */
            ::-webkit-scrollbar-button {
                background: #ddd;
                display: none;
            }

            /* 滚动条角落的样式（两个滚动条交汇的地方） */
            ::-webkit-scrollbar-corner {
                background: #555555;
            }
            .container {
                padding: 8px;
            }

            button {
                display: inline-block;
                line-height: 1;
                white-space: nowrap;
                cursor: pointer;
                background: #fff;
                border: 1px solid #dcdfe6;
                color: #606266;
                -webkit-appearance: none;
                text-align: center;
                box-sizing: border-box;
                outline: none;
                margin: 0;
                transition: .1s;
                font-weight: 500;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                padding: 12px 20px;
                font-size: 14px;
                border-radius: 4px;
                color: #fff;
                background-color: #409eff;
                border-color: #409eff;
            }

            .dropdown-list {
                margin-block-start: 5px;
                margin-block-end: 0;
                overflow: auto;
                max-height: 250px;
                padding: 4px;
                list-style-type: none;
                background-color: #ffffff;
                background-clip: padding-box;
                border-radius: 8px;
                outline: none;
                box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
                max-width: 250px;
            }

            .dropdown-list-hidden {
                display: none;
            }

            .dropdown-list li {
                padding: 8px;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .dropdown-list li:hover {
                background: rgba(0,0,0,0.04);
            }

            .selected {
                color: #66b1ff;
            }

            </style>

            <div class="container">
                <button>按钮</button>
                <ul class="dropdown-list dropdown-list-hidden"></ul>
            </div>
        `;
    }

    connectedCallback() {
        this.render();
    }

    #dropdownListShow(event) {
        const type = event.type;
        if (type === 'mouseleave') {
            this.$dropdownList.classList.add("dropdown-list-hidden");
        } else if (type === "mouseenter") {
            this.$dropdownList.classList.remove("dropdown-list-hidden");
        }
    }

    static get observedAttributes() {
        return ['text', "option", "options"];
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render();
    }

    get text() {
        const attrText = this.getAttribute('text');
        if (Object.prototype.toString.call(attrText) === '[object String]') {
            return attrText;
        } else {
            return '参数错误';
        }
    }

    set text(value) {
        if (Object.prototype.toString.call(value) === '[object String]') {
            this.setAttribute('text', value);
        } else {
            this.setAttribute('text', '参数错误');
        }
    }

    get option() {
        const attrOption = this.getAttribute('option');
        return attrOption;
    }

    set option(value) {
        this.setAttribute('option', value);
    }

    get options() {
        const attrOptions = this.getAttribute('options');
        try {
            const arr = JSON.parse(attrOptions);
            if (Array.isArray(arr)) {
                return arr;
            } else {
                console.error("options必须为数组");
                return [{ "label": "暂无数据", "value": null }];
            }
        } catch {
            console.error("options必须为数组");
        }
    }

    set options(value) {
        if (Array.isArray(value)) {
            this.setAttribute('options', value);
        } else {
            console.error("options必须为数组");
            this.setAttribute('options', [{ "label": "暂无数据", "value": null }]);
        }
    }

    render() {
        this.$button.innerHTML = this.text;
        this.$dropdownList.innerHTML = '';
        this.options.forEach((item) => {
            const li_item = document.createElement('li');

            if (this.option && this.option === item.value) {
                li_item.classList.add('selected');
            }

            li_item.addEventListener('click', () => {
                this.option = item.value;
                this.$dropdownList.classList.add("dropdown-list-hidden");
                this.dispatchEvent(
                    new CustomEvent('onOptionChange', { detail: { value: item.value} })
                );
            });

            li_item.innerHTML = item.label;
            this.$dropdownList.appendChild(li_item);
        });
    }
}

window.customElements.define('wh-dropdown', WH_dropdown);